<template>
  <li class="fx-dropdown-item" :class="{disabled}" @click="dropdownItemClick">
    <slot></slot>
  </li>
</template>

<script lang="ts">
import { defineComponent, inject, PropType } from 'vue'
import { Emitter } from 'mitt'

interface DropdownItemProps {
  label: string | number;
  disabled: boolean;
}

export default defineComponent({
  name: 'FDropdownItem',
  props: {
    // 需要回调的数据
    label: {
      type: [String, Number] as PropType<string | number>,
      default: null
    },
    // 禁用
    disabled: {
      type: Boolean as PropType<boolean>,
      default: false
    }
  },
  setup (props: DropdownItemProps) {
    const dropdownMittEmit = inject<Emitter['emit']>('dropdownMittEmit')
    // 是否点击隐藏
    const isClickClose = inject<boolean>('isClickClose')
    // 点击事件
    const dropdownItemClick = (ev: MouseEvent): void => {
      if (!isClickClose) ev.stopPropagation()
      if (props.disabled) {
        ev.stopPropagation()
        return
      }
      if (dropdownMittEmit) dropdownMittEmit('dropdownItemClick', props.label)
    }

    return {
      dropdownItemClick
    }
  }
})
</script>
